<template>
  <div>
    <h3 style="padding-left: 10px;">关键词搜索情况</h3>
    <div id="reportWordCloud"></div>
  </div>
</template>

<script>
import { reqWordCloud } from "@/api/report/visitlog";

import Highcharts from "highcharts/highstock";

export default {
  data() {
    return {
      chart: null,
      options: {
        credits: {
          enabled: false
        },
        series: [
          {
            type: "wordcloud",
            name: "访问量",
            data: []
          }
        ],
        title: {
          text: ""
        }
      }
    };
  },
  components: {},
  mounted() {},
  created() {},
  methods: {
    async init(query) {
      let res = await reqWordCloud(query);
      if (res.code === 200) {
        let text = res.data;
        let textData = text.split(/[,\. ]+/g).reduce(function(arr, word) {
          var obj = arr.find(function(obj) {
            return obj.name === word;
          });
          if (obj) {
            obj.weight += 1;
          } else {
            obj = {
              name: word,
              weight: 1
            };
            arr.push(obj);
          }
          return arr;
        }, []);
        this.options.series[0].data = textData;
        this.showChart();
      }
    },
    showChart() {
      if (this.chart) {
        this.chart.destroy();
      }
      this.chart = new Highcharts.Chart("reportWordCloud", this.options);
    }
  }
};
</script>


<style lang="scss" scoped>
</style>